<template>
	<div class="ring-cantainer" :style="{ 'width': width + 'px', 'height': width + 'px' }">
		<canvas id="canvas" :width="width" :height="width"></canvas>
		<div class="buy-review-mask" :style="maskStyle">
			<slot></slot>
		</div>
	</div>
</template>

<script>
export default {
  name: 'VRing',
  props: {
    coverColor: {
      type: [String, Array],
      default: 'green'
    },
    bgColor: {
      type: String,
      default: '#ccc'
    },
    percent: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 140
    },
    lineWidth: {
      type: Number,
      default: 8
    }
  },
  data () {
    return {
      currentPercent: 0
    }
  },
  watch: {
    percent () {
      this.run()
    }
  },
  computed: {
    // 多出的百分比
    surplusPercent () {
      return this.lineWidth / (4 * Math.PI * this.circleRadius)
    },
    // 真正的百分比
    totalPercent () {
      if (this.percent >= 1) {
        return 1
      } else if (this.percent >= this.surplusPercent) {
        return this.percent - this.surplusPercent
      } else {
        return this.percent
      }
    },
    // 表面圆环的颜色
    coverColors () {
      if (typeof this.coverColor === 'string') {
        return [this.coverColor, this.coverColor]
      } else {
        return this.coverColor
      }
    },
    // 大圆的半径
    circleRadius () {
      return (this.width - this.lineWidth) / 2
    },
    // 白色小圆的半径
    smallCircleRadius () {
      return (this.lineWidth + 2) / 4
    },
    // 文字区域的css样式
    maskStyle () {
      return {
        width: this.width - 2 * this.lineWidth + 'px',
        height: this.width - 2 * this.lineWidth + 'px',
        left: this.lineWidth + 'px',
        top: this.lineWidth + 'px'
      }
    }
  },
  methods: {
    run () {
      let canvas = document.getElementById('canvas')
      let ctx = canvas.getContext('2d')
      this.draw(ctx)
      this.timer = setInterval(() => {
        if (this.currentPercent >= this.totalPercent) {
          this.currentPercent = this.totalPercent
          clearInterval(this.timer)
        } else {
          this.currentPercent += 0.005
        }
        this.draw(ctx)
      }, 10)
    },
    draw (ctx) {
      // 背景圆环
      let r = this.width / 2
      ctx.strokeStyle = this.bgColor
      ctx.lineWidth = this.lineWidth
      ctx.beginPath()
      ctx.arc(r, r, this.circleRadius, 0, Math.PI * 2, false)
      ctx.stroke()
      // 表面圆环
      ctx.save()
      ctx.translate(r, r)
      ctx.rotate(3 * Math.PI / 2)
      let lingrad = ctx.createLinearGradient(this.width, 0, 0, 0)
      lingrad.addColorStop(0, this.coverColors[0])
      lingrad.addColorStop(1, this.coverColors[1])
      ctx.strokeStyle = lingrad
      ctx.lineCap = 'round'
      ctx.beginPath()
      ctx.arc(0, 0, this.circleRadius, 0, Math.PI * 2 * this.currentPercent, false)
      ctx.stroke()
      ctx.restore()
      // 白色小圆
      ctx.fillStyle = '#fff'
      ctx.beginPath()
      ctx.arc(r, this.lineWidth / 2, this.smallCircleRadius, 0, Math.PI * 2, false)
      ctx.fill()
    }
  }
}
</script>

<style scoped>
.ring-cantainer {
	margin: 0 auto;
	position: relative;
}
.buy-review-mask {
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
}
</style>